<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        function calc(type) {
            var inputNum1 = jQuery("#num1");
            var inputNum2 = jQuery("#num2");
            if(type==1){
                if (inputNum1.val()=="") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.val()=="") {
                    alert("请先输入数字2");
                    return false;
                }
                // 加法
                var total = parseInt(inputNum1.val()) + parseInt(inputNum2.val());
                //两种方式：
                //jQuery("#resultDiv")[0].innerHTML=
                jQuery("#resultDiv").html(
                    "<h2>计算相加的结果为：<strong style='color: chocolate;'>" + total + "</strong></h2>");
            }
            else if(type==2){
                if (inputNum1.val()=="") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.val()=="") {
                    alert("请先输入数字2");
                    return false;
                }
                // 减法
                var total = parseInt(inputNum1.val()) - parseInt(inputNum2.val());
                jQuery("#resultDiv")[0].innerHTML=
                    "<h2>计算相减的结果为：<strong style='color: chocolate;'>" + total + "</strong></h2>";
            }
            else if(type==3){
                if (inputNum1.val()=="") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.val()=="") {
                    alert("请先输入数字2");
                    return false;
                }
                // 乘法
                var total = parseInt(inputNum1.val()) * parseInt(inputNum2.val());
                jQuery("#resultDiv")[0].innerHTML=
                    "<h2>计算相乘的结果为：<strong style='color: chocolate;'>" + total + "</strong></h2>";
            }
            else if(type==4){
                if (inputNum1.val()=="") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.val()=="") {
                    alert("请先输入数字2");
                    return false;
                }
                // 乘法
                var total = parseInt(inputNum1.val()) / parseInt(inputNum2.val());
                jQuery("#resultDiv")[0].innerHTML=
                    "<h2>计算相除的结果为：<strong style='color: chocolate;'>" + total + "</strong></h2>";
            }
            else if(type==5){
                if(confirm("是否确认清空")) {
                    // 清空数据
                    inputNum1.val("");
                    inputNum2.val("");
                    jQuery("#resultDiv")[0].innerHTML="";
                }
            }
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
    <h1>计算器</h1><p></p>
    数字1：<input id="num1" type="number"><p></p>
    数字2：<input id="num2" type="number"><p></p>
    <div>
        <input type="button" value=" 相 加 " onclick="calc(1)">
        <input type="button" value=" 相 减 " onclick="calc(2)">
        <input type="button" value=" 相 乘 " onclick="calc(3)">
        <input type="button" value=" 相 除 " onclick="calc(4)">
        <input type="button" value=" 清 空 " onclick="calc(5)">
    </div>
    <div id="resultDiv" style="margin-top: 50px;">
    </div>
</div>
</body>
</html>